<!DOCTYPE html>
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>

<style type='text/css'>
*:before{-webkit-appearance:slider-vertical;}
</style>

<select  multiple='multiple'>
<optgroup>
<option>c</option>
</optgroup>
</select>

<input type='range' id='slider' step='any' min = '0' max = '100' oninput='destroyLayout()'></input>

<script>
var isMac = navigator.platform.indexOf('Mac') == 0;
function destroyLayout() {
    var slider = document.getElementById('slider');
    slider.style = "display:none";
}

function forceLayoutUpdate() {
    document.body.offsetTop;
}

forceLayoutUpdate();

if (!isMac) {
    testSliderNoCrash();
} else {
    testNothing();
}

function testSliderNoCrash() {
    var testSliderNoCrash = async_test('Does not crash when <input type="range"> has no layoutObject and when a non-element node has "slider-vertical" appearance.');
    testSliderNoCrash.step(function () {
        var slider = document.getElementById('slider');
        const touchSourceType = 1;
        var w = slider.clientWidth;
        var h = slider.clientHeight;
        var x = slider.offsetLeft + w / 2;
        var y = slider.offsetTop + h / 2;
        chrome.gpuBenchmarking.smoothDrag(x, y, x + w, y, function() {testSliderNoCrash.done()}, touchSourceType);
    });
}

function testNothing() {
    test(() => {}, 'Empty test for MacOS.');
}
</script>
